<template>
    <div class="harvestaddress">
       <v-header title="管理收货地址" ref="header"></v-header>
       <!-- 收获地址<div></div> -->
        <scroll ref="scroll" style="overflow: hidden;"
        :style="{height: scrollHeight}"
        :bounce="false">
            <div class="alladdress">
                <div class="addressWrapper" v-for="item in addressList" :key="item.id">
                    <div class="addressTop">
                        <div class="addressTopLeft">
                            <p>
                               {{item.receiptName}}
                            </p>
                        </div>
                        <div class="addressTopRight">
                            <p>
                                {{item.receiptPhone}}
                            </p>
                        </div>
                    </div>
                    <div class="detailAddress">
                        <p>
                            {{item.receiptProvince + item.receiptCity + item.receiptArea + item.detailAddress}}
                        </p>
                    </div>
                    <div class="defaultAddress">
                        <div class="defaultAddressLeft" @click="toggleDefault(item)">
                            <check-icon :value="item.defaultAddress === 1">默认地址</check-icon>
                        </div>
                        <div class="defaultAddressRight">
                            <div class="defaultEditAndDelete">
                                <div class="edit" @click="handleGoModifyAddress(item.id)">
                                  <i class="icon iconfont icon-edit-address"/>
                                    <p>
                                        编辑
                                    </p>
                                </div>
                                <div class="delete" @click="handleDelete(item.id)">
                                  <i class="icon iconfont icon-delete-address"/>
                                    <p>
                                        删除
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <not-data v-if="addressList.length === 0" tip="空空如也~<br>点击刷新" @handleClick="getAllReceptAddress()"></not-data>
            </div>
        </scroll>
        <!-- 底部按钮添加新地址<div></div> -->
        <div class="bottomDiv" ref="bottomWrapper">
            <div class="buttonWrapper" @click="handleModifyAddress">
                <x-button :gradients="['#1eb7a7', '#00ceb9']" type="primary">添加新地址</x-button>
            </div>
        </div>
    </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import notData from '@/components/not-data/not-data'
import axios from '@/api/axiosApi'
import { localUser } from '@/assets/js/local'
import { CheckIcon, XButton, Confirm } from 'vux'
export default {
  data () {
    return {
      scrollHeight: '500px',
      showDelete: false,
      addressList: []
    }
  },
  mounted () {
    this.scrollHeight = (window.innerHeight - this.$refs.header.$el.offsetHeight - 60) + 'px'
  },
  created () {
    this.getAllReceptAddress()
  },
  methods: {
    // 获取所有的地址
    getAllReceptAddress () {
      axios.get(this, '/v1/receiptAddress', {userId: localUser.get('id')}, (data) => {
        this.addressList = data
      })
    },
    toggleDefault (address) {
      if (address.defaultAddress === 1) {
        return
      }
      axios.put(this, '/v1/receiptAddress', {id: address.id, defaultAddress: 1, userId: localUser.get('id')}, (data) => {
        this.$vux.toast.text('设置默认地址成功', 'midddle')
        this.addressList.forEach(item => {
          if (item.id === address.id) {
            item.defaultAddress = 1
          } else {
            item.defaultAddress = 0
          }
        })
      })
    },
    handleModifyAddress () {
      this.$router.push('/user/addaddress')
    },
    handleGoModifyAddress (addressId) {
      this.$router.push('/user/modifyaddress/' + addressId)
    },
    handleDelete (id) {
      const _self = this
      this.$vux.confirm.show({
        title: '温馨提示',
        content: '确认删除该地址吗？',
        onConfirm () {
          axios.delete(_self, 'v1/receiptAddress/' + id, null, (data) => {
            _self.$vux.toast.text('删除地址成功', 'midddle')
            const index = _self.addressList.findIndex(o => o.id === id)
            _self.addressList.splice(index, 1)
          })
        }
      })
    }
  },
  components: {
    VHeader,
    Scroll,
    CheckIcon,
    XButton,
    Confirm,
    axios,
    localUser,
    notData
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.harvestaddress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;
  height:100%;
}

.alladdress {
    .addressWrapper {
        margin-bottom 10px
        background-color white
        .addressTop {
            display flex
            justify-content space-between
            padding-top 10px
            padding-left 15px
            padding-right 15px
            .addressTopLeft {
                p {
                    font-size $font-size-desc
                }
            }
            .addressTopRight {
                p {
                    font-size $font-size-desc
                }
            }
        }
        .detailAddress {
            padding-left 15px
            padding-right 15px
            margin-top 5px
            padding-bottom 20px
            border-bottom-style solid
            border-width:1px
            border-color: #E4E4E4
            p {
                font-size $font-size-desc
            }
        }
        .defaultAddress {
            display flex
            justify-content space-between
            padding-top 10px
            padding-left 15px
            padding-right 15px
            padding-bottom 10px
            .defaultAddressLeft {
                font-size $font-size-desc
            }
            .defaultAddressRight {
                font-size $font-size-desc
                .defaultEditAndDelete {
                    display flex
                    .edit {
                        display flex
                        p {
                            margin-left 5px
                        }
                    }
                    .delete {
                        margin-left 30px
                        display flex
                        p {
                            margin-left 5px
                        }
                    }
                }
            }
        }
    }
}


.bottomDiv {
  width 100%
  height 60px
  background-color white
  position absolute
  bottom 0px
  .buttonWrapper {
     margin-left 3%
     margin-right 3%
     margin-top 2%
  }
}
</style>
